<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag"%>

<style>
.pac-container{
	position: absolute;
	z-index: 2000;
}
#hidden-time{
	display:none;
}
</style>

<div class="modal fade" id="eventCreateModal"  onmousedown="mDown(this)" data-backdrop="static"  tabindex="-1" 
		role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
	<div class="modal-content">
		
		
	<form action="CreateEvent.do" method="POST" id="CreateEventIndex">
		<div class="modal-header" style="background-color: #62a8d1; color: white;">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h4 class="modal-title" id="myModalLabel">
				Tạo sự kiện mới
			</h4>
		</div>
		<div class="modal-body">	
			<font color="red">*</font>
				Tiêu đề <input type="text" name="title" id="title_create" placeholder="Nhập tiêu đề" style="width: 89%" value="" maxlength="200">	
			<div id="error-title" style="color:red"></div>	
			<label class="control-label" for="reservationtime">			
				Diễn ra cả ngày <input type="checkbox" id="isAllDay_create" name="isAllDay" checked>
			</label>											
			<div style="position:relative;">																	
				<div class="controls controls-row">	
					<div id="alldayPicker_create" style="float: right;width: 70px;">
						<button type="button" id="daterange_allday_create" style="margin-top: 3px;">
							Chọn <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
						</button>
					</div>
					<div id="notAlldayPicker_create" style="float: right;width: 70px; display:none;" >
						<button type="button" id="daterange_create"style="margin-top: 3px;">
							Chọn <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
						</button>
					</div>
					<div class="controls">						   		
						<input type="hidden" name="daterange_start" id="daterange_start_create" value="2014-02-05T00:00:00+07:00">
						<font color="red">*</font>
						Từ <input type="text" id="daterange_start_show_create" readonly style="width: 200px">
						<input type="hidden" name="daterange_end" id="daterange_end_create" value="2014-02-05T00:00:00+07:00">
						Đến <input type="text" id="daterange_end_show_create" style="width: 200px" readonly>		
					</div>
				</div>
				<div id="error-time" style="color:red"></div>
				<div style="margin-top: 8px;">
				Phân loại:
				<select name="eventCat" style="width: 100%;">
					<s:set var="catList" value="%{#request.CATEGORY_LIST}"></s:set>
					<s:iterator var="cat_iter" value="%{#catList}" >							
					<option value="${cat_iter.eventCategoryId}">${cat_iter.eventCategoryName}</option>							
					</s:iterator>
				</select>
				</div>
				
				
				<div id="map-canvas"></div>
				Địa điểm <input  type="text" class="form-control" name="location" id="location" placeholder="Nhập địa điểm" maxlength="99">
				
				Mô tả <textarea class="form-control" rows="2" name="description"></textarea>
				<div>
					Mời tham gia <input type="text" name="invitedPerson" id="invitedPerson_create" value="">
				</div>	
				Nhắc nhở trước: (<span id="reminder-max">10-180 phút</span>) <span id="notify-reminder" style="color:orange"></span>
				<div id="reminder-now" style="display: none;">Nhắc nhở ngay lập tức <input type="checkbox" name="reminder_now" id="reminder_now"/></div>
				<div class="input-group">
				  <input type="number"  name="reminder" id="reminder" placeholder="Nhập thời gian" value="10" 
				  			class="form-control" min="10" max="180">
				  <span class="input-group-addon">Phút</span>
				</div>	
				<div id="error-reminder" style="color:red"></div>			
				<font color="red">*</font>Trạng thái : 
				<input style="margin-left:20px" type="radio" name="visibility"  value="public"> Công khai
				<input style="margin-left:20px" name="visibility" type="radio" checked="checked" value="private"> Riêng tư <br/>					
			</div>
			<font color="red" style="position: absolute;left: 0;margin-left: 20px;bottom: 0;font-size: 10;">(*) Bắt buộc</font>
		</div>
		<div class="modal-footer">					
			<button type="button" onclick="submitCreateEventIndex()" class="btn btn-primary">Tạo mới</button>
			<button type="button" class="btn btn-default" data-dismiss="modal">Hủy</button>
		</div>
		</form>
	</div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

<!-- Scrip cho allday Event, khi allday dc check, endtime = startime + 1 ngay -->
<script type="text/javascript">
	//Autocomplete variables
	var componentRestrictions = {country: 'vn'};
	var input = document.getElementById('location');
	var place;
	var autocomplete = new google.maps.places.Autocomplete(input);
	
	autocomplete.setComponentRestrictions(componentRestrictions);	
	$('.applyBtn ').html('Đồng Ý');
	$('.cancelBtn ').html('Hủy');
</script>	



<script type="text/javascript">

//Script cho chức năng invite person
$(document).ready(function(){
	
	
	//---------------tag Input----------------------//
	$('#invitedPerson').tagsInput({
	    'autocomplete_url': getJson,
	    'autocomplete': { selectFirst:true,width:'100px',autoFill:true },
	    'placeholderColor' : '#666666',
	    'width':'auto',
	    'defaultText':'Thêm email',
	    'onAddTag':function(value){
				// he thong tu dong add roi, nen ko can xu ly gi them
			},
	    'onRemoveTag':function(value){
				// he thong tu dong add roi, nen ko can xu ly gi them	
	    	},
	    /*'onChange' : function(htmlObject){},*/
	    'removeWithBackspace' : true,
	    'minChars' : 1,
	    'maxChars' : 0, //if not provided there is no limit
	    
	 });
	 	  
	 function getJson(request, response){
		var keyword = request.term;
		$.ajax({  
			type: "get",  	
			contentType: "application/json; charset=utf-8",			
			dataType :"json",  
			url: "GetPeopleJson.do", 
			data:{	    	        	
				term: keyword,
			},
			success: function(json){
			    response(json.json);
			},
			error: function(jqXHR, textStatus, errorThrown){
				//alert('error');
			}
		});
		//var offsets = document.getElementById('invitedPerson_create_addTag').getBoundingClientRect();
		//$(".ui-autocomplete").css({top: 100, left: 200, position:'absolute'});
		if(!$.isFunction($.fn.curCSS)) 
		 $.curCSS = $.css; 
		 $.fn.curCSS = $.fn.css; 
	 }
	 //------------------//
	 
	 //Chuyển tên nút thành tiếng việt
	 $("#daterange_create").click(function(){
			$('.applyBtn ').html('Đồng Ý');
			$('.cancelBtn ').html('Hủy');
			
	});
	$("#daterange_allday_create").click(function(){
		$('.applyBtn ').html('Đồng Ý');
		$('.cancelBtn ').html('Hủy');
		
	});
	 
});
</script>

	
<script type="text/javascript">
function submitCreateEventIndex(){
	 var event_title = $('#title_create').val().replace(/\s/g, '');
	 if(event_title == ""){
		 document.getElementById('error-title').innerHTML="Tiêu đề không hợp lệ!";
		 return false;
	 }	
	 if( $('#isAllDay_create').is(':checked') == false ){
		var newMoment = new moment();
		var curentTimeMilisecond = newMoment.add({minutes:10}).valueOf();
		startTimeValue = document.getElementById('daterange_start_create').value;
		startTimeMilisecond = Date.parse(startTimeValue);
		if(startTimeMilisecond < curentTimeMilisecond){
			document.getElementById('error-time').innerHTML="Đã quá thời gian yêu cầu, xin chọn lại giờ bắt đầu!";
			document.getElementById('error-title').innerHTML=" ";
			return false;
		}
	 }
	 document.getElementById("CreateEventIndex").submit();
}

//Script cho chức năng tạo mới Event
$(document).ready(function(){
	
	 $("#reminder").blur(function(){
		 var maxReminder = $('#reminder').prop('max');
		 var reminderValue = parseInt($('#reminder').val());
		 if(isNaN(reminderValue)){
			 reminderValue = -1;
		 }
		 if(reminderValue < 10 || reminderValue > maxReminder ){
			 document.getElementById('error-reminder').innerHTML="Thời gian nhắc nhở không hợp lệ!";
			 $('#reminder').val(10);
		 }else{
			 document.getElementById('error-reminder').innerHTML=" ";
		 };
	  });
    
	//---------------tag Input----------------------//
	$('#invitedPerson_create').tagsInput({
	    'autocomplete_url': getJson,
	    'autocomplete': { selectFirst:true,width:'100px',autoFill:true },
	    'placeholderColor' : '#666666',
	    'width':'auto',
	    'defaultText':'Thêm email',
	    'onAddTag':function(value){
				// he thong tu dong add roi, nen ko can xu ly gi them
			},
	    'onRemoveTag':function(value){
				// he thong tu dong add roi, nen ko can xu ly gi them	
	    	},
	    /*'onChange' : function(htmlObject){},*/
	    'removeWithBackspace' : true,
	    'minChars' : 1,
	    'maxChars' : 0, //if not provided there is no limit
	    
	 });
	 	  
	 function getJson(request, response){
		var keyword = request.term;
		$.ajax({  
			type: "get",  	
			contentType: "application/json; charset=utf-8",			
			dataType :"json",  
			url: "GetPeopleJson.do", 
			data:{	    	        	
				term: keyword,
			},
			success: function(json){
			    response(json.json);
			},
			error: function(jqXHR, textStatus, errorThrown){
				//alert('error');
			}
		});	 
		if(!$.isFunction($.fn.curCSS)) 
			 $.curCSS = $.css; 
			 $.fn.curCSS = $.fn.css; 
	 };
	 
	 //Kiem tra xem tag input co phai la email k
	 
	
});
</script>



<script type="text/javascript">
/*
$(document).ready(function(){		
	$('#daterange_create').click(function(){		
		var currentDate = moment().clone().date();
		var currentHours = moment().clone().hours();
		var currentMins = moment().clone().minutes();
		var startDatePick = $(".left").find('.active.start-date').html();
		startDatePick = parseInt(startDatePick);
		if(startDatePick == currentDate){
			if(currentHours < 12){
				$(".left>.calendar-time>.hourselect option").each(function()
				{
				    var x = $(this).val();
				});
			}else{
				var x = $(".left>.calendar-time>.hourselect option");
				for(var i = 0; i < x.length; i ++){
					if(parseInt(x[i].text) < currentHours){
						//x[i].addclass("hidden-time");
					}
				}
			}
		}
	});
	
	
});
*/
//Script khi click tren modal body
function mDown(obj){
	// nếu datetime picker đang mở thì bấm cancel
	if($('.daterangepicker ').is(":visible")){
		$(".cancelBtn").click();
	}
	//bấm enter phần invite
	var email = $("#invitedPerson_create_tag").val();
	if(email == "Thêm email"){
		return false;
	}else if(email == "Email không hợp lệ"){
		return false;
	}else if(email == "Email bị trùng"){
		return false;
	}else{
		e = jQuery.Event("keypress");
		e.which = 13;    
	    $("#invitedPerson_create_tag").trigger(e);
	}
}
</script>
		